<template>
  <el-container>
    <el-aside width="400px">
      <el-card class="aside-card">
        <el-form label-suffix="：" label-width="auto">
          <el-form-item label="等级">
            <el-space class="level-wrap">
              <el-input-number v-model="w" :controls="false"></el-input-number>
              <el-icon><Close /></el-icon>
              <el-input-number v-model="h" :controls="false"></el-input-number>
            </el-space>
          </el-form-item>
          <el-form-item label="道具">
            <div class="props-icon-wrap">
              <div
                class="prop-icon"
                :class="{ show: item.x && item.y }"
                :style="{
                  backgroundPositionX: item.x + 'px',
                  backgroundPositionY: item.y + 'px',
                }"
                v-for="item in propsData"
                draggable="true"
                @dragstart="(e) => dragstart(e, item)"
                @contextmenu="(e) => setDataItems(e, item)"
              >
                <img v-if="item.img" :src="item.img" />
                <el-tag disable-transitions v-else-if="!(item.x && item.y)">{{
                  item.name
                }}</el-tag>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </el-aside>
    <el-main>
      <el-button
        class="illustrate"
        :icon="ArrowLeftBold"
        circle
        @click="drawer = true"
      />
      <el-drawer v-model="drawer" title="操作说明">
        <el-descriptions :column="1">
          <el-descriptions-item label="等级">
            设置任意 n * m 的方块矩阵
          </el-descriptions-item>
          <el-descriptions-item label="道具"> 可用道具库 </el-descriptions-item>
          <el-descriptions-item>
            <el-tag>按键说明</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="添加">
            将<b>左侧</b>道具拖入<b>右侧</b>任意方块内，或鼠标<b>右键</b>点击道具
          </el-descriptions-item>
          <el-descriptions-item label="删除">
            鼠标<b><i>右键</i></b
            >单击方块内的道具
          </el-descriptions-item>
          <el-descriptions-item label="交换">
            将<b>右侧</b>方块内的道具拖入目标方块，即可交换
          </el-descriptions-item>
          <el-descriptions-item label="复制">
            按住<b><i>ctrl</i></b
            >键，将右侧方块内的道具道具拖入其他方块
          </el-descriptions-item>
        </el-descriptions>
      </el-drawer>
      <el-card class="main-card">
        <el-space direction="vertical">
          <el-space v-for="i in h">
            <div
              v-for="j in w"
              @drop="(e) => drop(e, w * (i - 1) + j - 1)"
              @dragover="dragover"
              @contextmenu="(e) => contextmenu(e, w * (i - 1) + j - 1)"
              :draggable="itemsData[w * (i - 1) + j - 1] ? 'true' : 'false'"
              @dragstart="(e) => dragstartItem(e, w * (i - 1) + j - 1)"
              class="item prop-icon"
              :style="{
                backgroundPositionX: itemsData[w * (i - 1) + j - 1]?.x + 'px',
                backgroundPositionY: itemsData[w * (i - 1) + j - 1]?.y + 'px',
              }"
              :class="{ show: itemsData[w * (i - 1) + j - 1] }"
            >
              <img
                v-if="itemsData[w * (i - 1) + j - 1]?.img"
                :src="itemsData[w * (i - 1) + j - 1]?.img"
              />
              <el-tag
                disable-transitions
                v-else-if="
                  !(
                    itemsData[w * (i - 1) + j - 1]?.x &&
                    itemsData[w * (i - 1) + j - 1]?.y
                  ) && itemsData[w * (i - 1) + j - 1]?.name
                "
                >{{ itemsData[w * (i - 1) + j - 1]?.name }}</el-tag
              >
            </div>
          </el-space>
        </el-space>
        <el-space class="actions">
          <el-button @click="itemsData.length = 0">重置</el-button>
        </el-space>
      </el-card>
    </el-main>
  </el-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import { ArrowLeftBold } from "@element-plus/icons-vue";
import MONET from '@/assets/money.png';
import DIAMOND from '@/assets/diamond.png';

const w = ref(2);
const h = ref(2);
const drawer = ref(false);
onMounted(() => {
  const level = localStorage.getItem("level");
  if (!level) {
    drawer.value = true;
  } else {
    const data = JSON.parse(level);
    w.value = data.w;
    h.value = data.h;
  }
});
watch([w, h], () => {
  localStorage.setItem(
    "level",
    JSON.stringify({
      w: w.value,
      h: h.value,
    })
  );
});
interface Item {
  x?: number;
  y?: number;
  img?: string;
  name: string;
}
const propsData: Item[] = [
  {
    x: -444,
    y: -796,
    name: "铲子",
  },
  {
    x: -308,
    y: -114,
    name: "鸡蛋",
  },
  {
    x: -35,
    y: -387,
    name: "雕像券",
  },
  {
    x: -308,
    y: -660,
    name: "囤积券",
  },
  {
    x: -444,
    y: -524,
    name: "金币",
  },
  {
    x: -34,
    y: -114,
    name: "黄铜",
  },
  {
    x: -172,
    y: -114,
    name: "布",
  },
  {
    x: -444,
    y: -114,
    name: "落羽",
  },
  {
    x: -171,
    y: -387,
    name: "生铁",
  },
  {
    x: -444,
    y: -252,
    name: "皮",
  },
  {
    x: -581,
    y: -796,
    name: "青木",
  },
  {
    img: MONET,
    name: "钱",
  },
  {
    img: DIAMOND,
    name: "钻石",
  },
  {
    name: "备用",
  },
];
const itemsData = reactive<(Item | null)[]>([]);
const dragstart = (event: DragEvent, item: Item | null) => {
  event.dataTransfer?.setData("text/plain", JSON.stringify(item));
};
const dragstartItem = (event: DragEvent, index: number) => {
  event.dataTransfer?.setData("text/plain", index.toString());
};
const drop = (event: DragEvent, index: number) => {
  event.preventDefault();
  const data = event.dataTransfer?.getData("text/plain");
  if (data) {
    if (!isNaN(Number(data))) {
      const cacheItem = JSON.stringify(itemsData[index]);
      itemsData[index] = JSON.parse(JSON.stringify(itemsData[Number(data)]));
      if (!event.ctrlKey) {
        itemsData[Number(data)] = cacheItem ? JSON.parse(cacheItem) : null;
      }
    } else {
      itemsData[index] = JSON.parse(data);
    }
  }
};
const dragover = (event: DragEvent) => {
  event.preventDefault();
};
const contextmenu = (event: Event, index: number) => {
  event.preventDefault();
  itemsData[index] = null;
};
const setDataItems = (event: Event, item: Item) => {
  event.preventDefault();
  itemsData[itemsData.length] = { ...item };
};
</script>
<style lang="scss" scoped>
.el-card,
.el-container {
  height: 100%;
  box-sizing: border-box;
  display: flex;
}
.el-main {
  position: relative;
  overflow: hidden;
  .illustrate {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    transition: transform 0.2s;
    &:hover {
      transform: translate(0, -50%);
    }
  }
}
:deep(.main-card) {
  overflow: auto;
  position: relative;
  .actions {
    position: absolute;
    top: 20px;
    right: 10px;
  }
  .el-card__body {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    .item {
      background-color: bisque;
      border-radius: 20px;
    }
  }
}
.level-wrap {
  flex-wrap: nowrap;
  .el-input-number {
    width: 50px;
  }
}
.aside-card {
  padding: 0 20px;
  overflow-y: auto;
}
.props-icon-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.prop-icon {
  width: 120px;
  height: 120px;

  &.show {
    background: url(@/assets/props-icon-map.png) no-repeat;
    background-size: 734px;
  }
  img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
  }
  .el-tag {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    border-radius: 18px;
  }
}
</style>
